import React, { useLayoutEffect } from 'react';
import gsap from 'gsap';

export const useScrollHook = (...props) => {
    useLayoutEffect(() => {
        const textElements = gsap.utils.toArray('.gsap-enter--fade-in') as HTMLElement[];
        const tls = [];

        textElements.forEach((textElement) => {
            const tl = gsap.timeline({
                scrollTrigger: {
                    trigger: textElement,
                    start: 'top bottom-=150px'

                    // markers: true,
                },
            });



            tl.to(textElement, {
                className: (index, element) => {
                    element.classList.add('gsap-enter--fade-in-animation');
                    return element.classList.value;
                },
                delay: Math.random() * 0.3,
            });

            tls.push(tl);
        });

        return () => {
            tls.forEach((tl) => {
                tl?.scrollTrigger?.kill();
                tl?.kill();
            });
        };
    }, [...props]);
};
